<template>
  <div ref="chart" style="width: 100%; height: 600px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: {
    xAxisData: Array,
    seriesData: Array,
  },
  mounted() {
    this.renderChart();
  },
  watch: {
    xAxisData: 'renderChart',
    seriesData: 'renderChart',
  },
  methods: {
  renderChart() {
    const chart = echarts.init(this.$refs.chart);
    const option = {
      xAxis: {
        type: 'category',
        data: this.xAxisData.slice().reverse(),
        interval: 10, // 根据需要调整
      },
      yAxis: {
        type: 'value',
        interval: 1000, // 每千展示一个刻度
        axisLabel: {
          formatter: function (value) {
            return (value >= 1000) ? (value / 1000).toFixed(1) + 'K' : value.toString();
          }
        },
      },
      series: [{
        data: this.seriesData.slice().reverse(), // 反转数据
        type: 'bar',
        label: {
        show: true, // 显示标签
        position: 'top', // 在柱形上方显示
        formatter: '{c}', // 显示数据值
      },
      }],
    };
    chart.setOption(option);
  },
},

};
</script>

<style scoped lang="scss">
/* 在样式中设置图表容器的宽度和高度 */
.chart-container {
  width: 100%;
  height: 400px; /* 根据需要调整高度 */
}

</style>

